<template>
  <div id="shopIndex">
    <div class="header">
      <div class="search fl">
        <input type="text" placeholder='盘日月星辰结掌间'>
      </div>
      <router-link to="/ShopCart">
        <div class="shop fr">
          <a href="">
            <img src="../images/shop.png" alt="">
            <p>购物车</p>
          </a>
        </div>
      </router-link>

      <div class="clear"></div>
    </div>
    <div class="swiper-container banner">
      <div class="swiper-wrapper">
        <swiper loop :show-desc-mask="false" auto dots-position="center" :aspect-ratio="400/750">
          <swiper-item v-for="(item,index) in banner_list" :key="index">
            <!-- <a :href="item.url"> -->
            <img :src="'./static/data/home/'+item.src" class="vux-img"/>
            <!-- </a> -->
          </swiper-item>
        </swiper>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="class-list">
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/bz.png" alt="">
          </div>
          <p>珠石宝石</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye4.png" alt="">
          </div>
          <p>珠石宝石</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye7.png" alt="">
          </div>
          <p>珠石宝石</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye8.png" alt="">
          </div>
          <p>茶叶茶具</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye5.png" alt="">
          </div>
          <p>文玩杂项</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye3.png" alt="">
          </div>
          <p>限时秒杀</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye2.png" alt="">
          </div>
          <p>美酒滋补</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye9.png" alt="">
          </div>
          <p>仿古藏品</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye6.png" alt="">
          </div>
          <p>字画古籍</p>
        </a>
      </div>
      <div class="class-list-item fl">
        <a href="">
          <div class="class-list-item-img">
            <img src="../images/ic_home_chaye1.png" alt="">
          </div>
          <p>新手教程</p>
        </a>
      </div>
      <div class="clear"></div>
    </div>
    <div class="dynamic">
      <div class="dynamic-titleBox">
        <div class="dynamic-title fl">
          <img src="../images/dynamic.png" alt="">
        </div>
        <div class="swiper-container fr">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="fl">恭喜落华**羽然通关周笔畅北京会...</div>
              <img class="fr" src="../images/dist.png" alt="">
              <div class="clear"></div>
            </div>
            <div class="swiper-slide">Slide 2</div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="dynamic-list">
        <div class="dynamic-item first fl">
          <div class="dynamic-downtime">
            <span class='mr30'>限时秒杀</span>
            <span>03</span>
            <i>:</i>
            <span>49</span>
            <i>:</i>
            <span>26</span>
          </div>
          <img src="../images/pro.png" alt="">
        </div>
        <div class="dynamic-itemBox fr">
          <div class="dynamic-item two fr">
            <div class="dynamic-downtime">
              <span class='mr30'>木鱼</span>
            </div>
            <img src="../images/pro.png" alt="">
          </div>
          <div class="dynamic-item fl">
            <div class="dynamic-downtime">
              <span class='mr30'>木鱼</span>
            </div>
            <img src="../images/pro.png" alt="">
          </div>
          <div class="dynamic-item fr">
            <div class="dynamic-downtime">
              <span class='mr30'>木鱼</span>
            </div>
            <img src="../images/pro.png" alt="">
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <!-- 优店精选 -->
    <div class="selected">
      <div class="selected-titleBox">
        <div class="selected-title fl">
          <p>优店精选</p>
          <span>BEST STORE SELECTION</span>
        </div>
        <div class="more fr"><a href="">更多</a></div>
      </div>
      <div class="selectedBox">
        <div class="selectedBox-title">
          <img src="../images/probc.png" alt="">
          <div class="selectedBox-titleBox">
            <p>高甲皇园甄选黑茶店铺</p>
            <span>安化黑茶选高甲皇园</span>
          </div>
          <div class="moreShop">搜索店铺></div>
        </div>
        <div class="selected-list">
          <div class="selected-listBox">
            <div class="selected-item fl">
              <a href="">
                <img src="../images/pro.png" alt="">
                <p>高甲皇园茶</p>
                <span>黑茶品高甲皇园</span>
              </a>
            </div>
            <div class="selected-item fl">
              <a href="">
                <img src="../images/pro.png" alt="">
                <p>高甲皇园茶</p>
                <span>黑茶品高甲皇园</span>
              </a>
            </div>
            <div class="selected-item fl">
              <a href="">
                <img src="../images/pro.png" alt="">
                <p>高甲皇园茶</p>
                <span>黑茶品高甲皇园</span>
              </a>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- //拍卖专场 -->
    <div class="selected auction">
      <div class="selected-titleBox">
        <div class="selected-title fl">
          <p>拍卖专场</p>
          <span>AUCTION SPECIAL</span>
        </div>
        <div class="more fr"><a href="">更多</a></div>
      </div>
      <div class="selectedBox2">
        <div class="selectedBox-title">
          <div class="selectedBox-titleBox">
            <p class="fl">汝州原产地汝瓷臻品专场</p>
            <span class='fr'>96次围观</span>
          </div>
          <div class="clear"></div>
          <img src="../images/auction.png" alt="">
        </div>
        <div class="selected-list">
          <div class="selected-listBox">
            <div class="selected-item fl">
              <a href="">
                <img src="../images/pro.png" alt="">
                <p>高甲皇园茶</p>
                <span>￥10</span>
              </a>
            </div>
            <div class="selected-item fl">
              <a href="">
                <img src="../images/pro.png" alt="">
                <p>高甲皇园茶</p>
                <span>￥10</span>
              </a>
            </div>
            <div class="selected-item fl">
              <a href="">
                <img src="../images/pro.png" alt="">
                <p>高甲皇园茶</p>
                <span>￥10</span>
              </a>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 精选专场 -->
    <div class="selected-pro">
      <div class="selected-pro-titleBox">
        <div class="selected-pro-title">
          <img src="../images/flower.png" alt="">
          <span>精选优品</span>
          <img src="../images/flower.png" alt="">
        </div>
        <p class="selected-pro-cont">美好的生活 如夏日的清泉</p>
      </div>
      <div class="selected-pro-list">
        <div class="selected-pro-item" v-for="(item,index) in goods_list">
          <router-link :to="'/shop/shopingDetial/id/' + item.commodity_id">
            <img :src="item.goods.goods_thumb" alt="">
            <p>{{item.goods_name}}</p>
            <div class="selected-pro-cont">
              <div class="selected-pro-money fl">
                ￥{{item.goods_price}}
              </div>
              <div class="selected-pro-good fr">100%好评</div>
              <div class="clear"></div>
            </div>
          </router-link>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>


<script>
import { bannerList } from '../api/service'
import $ from 'jquery'
import {
  XHeader, Loading, Toast, Swiper,
  SwiperItem,
} from 'vux'

export default {
  data() {
    return {
      banner_list: [],
      goods_list: '',
    }
  },
  components: {
    XHeader,
    Loading,
    Toast,
    Swiper,
    SwiperItem,
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == '/shop/shopDetial') {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();
  },
  mounted() {
    // this.getSpecialInfo();
    this.getBanner();
    this.getGoodsList();
  },
  methods: {
    //获取banner图
    getBanner: function () {
      bannerList().then(result => {
        this.banner_list = result
      })
    },
    getGoodsList: function () {
      this.$http({
        method: 'GET',
        url: '/los/api/mall/goods_list.json',
        data: ''
      }).then((result) => {
        console.log(result)
        $.each(result.data.data.mall_goods, function (index, el) {
          if (this.goods.goods_thumb == '') {
            this.goods.goods_thumb = '/static/img/pro.d566bf1.png'
          }
        });
        this.goods_list = result.data.data.mall_goods;
        console.log(this.goods_list)
      }).catch((err) => {
        console.log(err);
      })
    },
    //获取banner图
    back: function () {
      window.history.go(-1);
    },
  }
}
</script>

<style scoped>
  .header {
    height: 1.173333rem;
    width: 100%;
    font-size: 0.266667rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header .class {
    text-align: center;
    color: #fff;
    padding-left: 0.346667rem;
  }

  .header .class a {
    color: #fff;
  }

  .header .class img {
    width: 0.533333rem;
    height: 0.4rem;
    display: inline-block;
    margin-bottom: 0.053333rem;
    margin-top: 0.2rem;
  }

  .header .search {
    position: relative;
  }

  .header .search input {
    width: 6.933333rem;
    height: 0.826667rem;
    background-color: #fff;
    line-height: 0.826667rem;
    border-radius: 0.413333rem;
    padding-left: 1.013333rem;
    margin-left: 0.2rem;
    font-size: 0.32rem;
    box-sizing: border-box;
  }

  .header .search:before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0.19rem;
    background: url(../images/search.png) center center;
    background-size: 100% auto;
    width: 0.4rem;
    height: 0.4rem;
  }

  .header .shop {
    text-align: center;
    margin-right: 0.253333rem;
  }
  .header .shop.fr{
    position: absolute;
    margin-right: 0;
    right: 10px;
    top: 0;
  }
  .header .shop img {
    display: inline-block;
    width: 0.48rem;
    height: 0.426667rem;
    margin-top: 0.213333rem;
  }

  .header .shop a {
    color: #fff;
  }

  /*//轮播图*/
  .banner.swiper-container {
    width: 100%;
    /*margin-top: -1.133333rem;*/
    margin-top: 1.173333rem;
    position: relative;
  }

  .banner .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .banner .swiper-slide img {
    display: inline-block;
    width: 100%;
    z-index: 1;
  }

  .class-list {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    /*height: 4.8rem;*/
    padding: 0.453333rem 0.533333rem;
    padding-bottom: 0;
    border-top-left-radius: 0.213333rem;
    border-top-right-radius: 0.213333rem;
    margin-top: -0.133333rem;
    z-index: 100;
    position: relative;
    background: linear-gradient(0deg, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 10%);
  }

  .banner .swiper-pagination {
    bottom: 6% !important;
  }

  .class-list .class-list-item {
    width: 1.333333rem;
    margin-right: 0.55rem;
    font-size: 0.32rem;
    text-align: center;
    margin-bottom: 0.533333rem;
  }

  .class-list .class-list-item p {
    color: #222;
    line-height: 0.293333rem;
    margin-top: 0.186667rem;
  }

  .class-list .class-list-item img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .class-list .class-list-item:nth-of-type(5n) {
    margin-right: 0;
  }

  .dynamic {

    width: 9.306667rem;
    margin: 0 auto;
    background: #fff;
    border-top-left-radius: 0.186667rem;
    border-top-right-radius: 0.186667rem;
  }

  .dynamic-titleBox {
    height: 1.053333rem;
    line-height: 1.053333rem;
    border-top-left-radius: 0.186667rem;
    border-top-right-radius: 0.186667rem;
    overflow: hidden;
  }

  .dynamic .swiper-container {
    width: 6.666667rem;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .dynamic .swiper-slide {
    text-align: center;
    font-size: 0.32rem;
    background: #fff;
    /* Center slide text vertically */
    /*display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
  }

  .dynamic .dynamic-title img {
    display: inline-block;
    height: 0.4rem;
    margin-top: 0.333333rem;
    margin-left: 0.16rem;
  }

  .dynamic .swiper-slide {
    line-height: 1.04rem;
  }

  .dynamic .swiper-slide .fl {
    width: 5.026667rem;
    display: block;
  }

  .dynamic .swiper-slide img {
    display: inline-block;
    width: 1.066667rem;
    height: 1.066667rem;
  }

  .dynamic-item {
    width: 2.24rem;
    height: 2.72rem;
    position: relative;
    overflow: hidden;
  }

  .dynamic-itemBox {
    width: 4.6rem;
  }

  .dynamic-item.first {
    width: 4.6rem;
    height: 5.573333rem;
    border-radius: 0px 0px 0px 0.16rem;
  }

  .dynamic-item.first img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dynamic-item.two {
    width: 4.6rem;
    margin-bottom: 0.133333rem;
  }

  .dynamic-item .dynamic-downtime {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.48rem;
    /*line-height: 0.48rem;*/
    color: #fff;
  }

  .dynamic-item img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dynamic-item .dynamic-downtime span {
    display: inline-block;
    line-height: 0.48rem;
    width: 0.533333rem;
    text-align: center;
    background-color: #E3453A;
    font-size: 0.293333rem;
    border-radius: 0px 0px 0.106667rem 0px;
    position: relative;
  }

  .dynamic-item .dynamic-downtime span:before {
    content: '';
    position: absolute;
    right: -0.133333rem;
    top: 0;
    width: 0;
    height: 0;
    border-top: 14px solid #E3453A;
    border-left: 0.133333rem solid transparent;
    border-right: 0.133333rem solid transparent;
  }

  .dynamic-item .dynamic-downtime .mr30 {
    margin-right: 0.4rem;
    width: 1.546667rem;
    padding: 0;
    text-align: center;
  }

  .dynamic-item .dynamic-downtime i {
    color: #E3453A;
    font-weight: bold;
  }

  .selected {
    width: 9.306667rem;
    margin: 0 auto;
    margin-top: 0.666667rem;
    margin-bottom: 0.4rem;
  }

  .selected-titleBox {
    height: 1.053333rem;
  }

  .selected-titleBox .selected-title {
    color: #222;
    font-size: 0.4rem;
    line-height: 0.4rem;
    /*font-weight: bold;*/
    position: relative;
  }

  .selected-titleBox .selected-title p {
    display: inline-block;
    margin-right: 0.24rem;
  }

  .selected-titleBox .selected-title span {
    color: #D7D9E4;
    letter-spacing: -50%;
  }

  .more a {
    color: #222;
    font-size: 0.32rem;
  }

  .selectedBox .selectedBox-title {
    position: relative;
  }

  .selectedBox .selectedBox-title img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .selectedBox .selectedBox-title .selectedBox-titleBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    padding-left: 0.213333rem;
    box-sizing: border-box;
  }

  .selectedBox .selectedBox-title .selectedBox-titleBox p {
    font-size: 0.48rem;
    margin-top: 0.573333rem;
    line-height: 0.453333rem;
    margin-bottom: 0.253333rem;
  }

  .selectedBox .selectedBox-title .selectedBox-titleBox span {
    font-size: 0.32rem;
    font-weight: 400;
  }

  .selectedBox .selectedBox-title .moreShop {
    position: absolute;
    top: 0.72rem;
    right: 0.213333rem;
    width: 1.973333rem;
    height: 0.666667rem;
    line-height: 0.666667rem;
    text-align: center;
    color: #222;
    background: #fff;
    border-radius: 0.333333rem;
  }

  .selectedBox .selected-list {
    background-color: #fff;
    z-index: 10;
    position: relative;
    height: 3.893333rem;
    border-bottom-left-radius: 0.186667rem;
    border-bottom-right-radius: 0.186667rem;
  }

  .selectedBox .selected-list .selected-item {
    width: 2.853333rem;
    margin-right: 0.16rem;
    border-radius: 0.106667rem;
    overflow: hidden;
    text-align: center;
    z-index: 10;
  }

  .selectedBox .selected-list .selected-item p {
    font-size: 0.32rem;
    line-height: 0.306667rem;
    margin-top: 0.266667rem;
    margin-bottom: 0.1rem;
  }

  .selectedBox .selected-list .selected-item span {
    line-height: 0.306667rem;
  }

  .selectedBox .selected-list .selected-item:nth-of-type(3n) {
    margin-right: 0;
  }

  .selectedBox .selected-list .selected-item img {
    width: 100%;
    display: block;
  }

  .selectedBox .selected-listBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -0.84rem;
    left: 0;
    padding: 0 0.213333rem;
    box-sizing: border-box;
  }

  .auction .selectedBox-title img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .auction .selectedBox2 .selectedBox-titleBox {
    height: 1.066667rem;
    border-top-left-radius: 0.16rem;
    border-top-right-radius: 0.16rem;
    background-color: #71B0E2;
    color: #fff;
    line-height: 1.066667rem;
    padding: 0 0.213333rem;
    box-sizing: border-box;
    font-size: 0.373333rem;
  }

  .auction .selectedBox2 .selectedBox-titleBox img {
    display: inline-block;
    width: 100%;
    height: 3.44rem;
    border-radius: 0;
    position: relative;
  }

  .auction .selectedBox2 .selectedBox-titleBox img:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 14px solid #fff;
    border-left: 0.133333rem solid transparent;
    border-right: 0.133333rem solid transparent;
  }

  .auction .selectedBox2 .selected-list .selected-item {
    width: 3.013333rem;
    margin-right: 0.133333rem;
    text-align: center;
    background-color: #fff;
    padding-bottom: 0.266667rem;
  }

  .auction .selectedBox2 .selected-list .selected-item:nth-of-type(3n) {
    margin-right: 0;
  }

  .auction .selectedBox2 .selected-list .selected-item img {
    width: 100%;
    display: block;
  }

  .auction .selectedBox2 .selected-list .selected-item p {
    font-size: 0.32rem;
    margin-top: 0.306667rem;
    line-height: 0.4rem;
  }

  .auction .selectedBox2 .selected-list .selected-item span {
    color: #A30000;
    font-size: 0.32rem;
    margin-top: 0.266667rem;
  }

  .selected-pro {
    margin-top: 0.666667rem;
  }

  .selected-pro .selected-pro-titleBox .selected-pro-title {
    text-align: center;
    font-size: 0.4rem;
  }

  .selected-pro .selected-pro-titleBox .selected-pro-title img {
    display: inline-block;
    width: 0.32rem;
    height: 0.32rem;
  }

  .selected-pro .selected-pro-titleBox .selected-pro-cont {
    font-size: 0.293333rem;
    color: #B6BAD1;
    text-align: center;
  }

  .selected-pro-list {
    padding: 0 0.346667rem;
    margin-top: 0.453333rem;
  }

  .selected-pro-list .selected-pro-item {
    width: 4.586667rem;
    border-radius: 0.133333rem;
    overflow: hidden;
    background-color: #fff;
    margin-right: 0.133333rem;
    float: left;
    margin-bottom: 0.133333rem;
  }

  .selected-pro-list .selected-pro-item:nth-of-type(2n) {
    margin-right: 0;
  }

  .selected-pro-list .selected-pro-item img {
    display: block;
    width: 100%;
    height: 4.8rem;
  }

  .selected-pro-list .selected-pro-item p {
    font-size: 0.373333rem;
    line-height: 0.36rem;
    margin-top: 0.346667rem;
    margin-bottom: 0.466667rem;
    padding: 0 0.2rem;
  }

  .selected-pro-list .selected-pro-item .selected-pro-cont {
    padding: 0 0.2rem;
    padding-bottom: 0.453333rem;
    line-height: 0.346667rem;
  }

  .selected-pro-list .selected-pro-item .selected-pro-cont .selected-pro-money {
    color: #A30000;
    font-size: 0.453333rem;
  }

  .selected-pro-list .selected-pro-item .selected-pro-cont .selected-pro-good {
    font-size: 0.32rem;
    color: #999999;
  }

  .vux-slider > .vux-swiper > .vux-swiper-item > img {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>
